<template>
  <div class='tab1'>
    <section v-if='res.length'>
      <ul class="tab1-list" v-for='(k,i) in res' @click='gotoDetail(k)'> 
        <li><div><span class='tab1-list-icon' v-if='k.type=="请"'>假</span><span v-else class='tab1-list-icon xiaojia'>销</span></div><div>{{k.name}}的{{k.type}}假申请</div><div>{{k.deptname}}</div><div class="color-999" style="margin-left:20px">{{k.leave_name}} (共{{k.leave_day}}天)</div></li>
        <li><div class="color-999">{{k.type}}假时间</div><div><span>{{k.start_time}} &nbsp;&nbsp;{{k.Leave_st_section | ampm}}&nbsp;&nbsp;</span> &nbsp;至&nbsp; <span>&nbsp;&nbsp;&nbsp;{{k.end_time}}&nbsp;&nbsp; {{k.Leave_end_section | ampm}}</span></div></li>
        <li><div class="color-999">{{k.type}}假理由</div><div class='reason'>{{k.leave_reason}}</div></li>
        <li><div class="color-999">当前步骤</div><div :class="handleColor(k.auditStatus)">{{k.auditStatus}}</div></li>
      </ul>
      <p v-if='!loadAllFlag' class="loadmore" @click.stop='handleLoadMore'>加载更多...</p>
      <p v-else class="loadmore2">已加载全部</p>
   </section>
    <section class="noData" v-if='!res.length'>
      <div>
        <img src="../../../../static/images/nodata.svg" alt="">
      </div>
      <p>您暂时还没有相关审批</p>
    </section>
  </div>
</template>

<script>

export default {

  data () {
    return {
      res: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      loadAllFlag: false
    }
  },
  filters: {
    ampm: function (value) {
      if (value == '1') {
        return '上午'
      } else if (value == '2') {
        return '下午'
      }

    }
  },
  methods: {

    handleColor (str) {
      switch (str) {
        case '已审批':
          return 'checking'
          break;
        case '已同意':
          return 'checking'
          break;
        case '已拒绝':
          return 'nook'
        default:
          return 'pass'
          break;
      }
    },

    handleLoadMore () {
      setTimeout(() => {
        this.pageNum++
        this.sendAjax()
      }, 1);
    },
    sendAjax () {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }

      this.Axios
        .Post(this.URL.examinationByrecord.url, params)
        .then(res => {


          res.data.datas.forEach(ele => {
            if(ele.busi_id.startsWith('XJ')) {
              ele.type = '销'
            }else if(ele.busi_id.startsWith('QJ')){
              ele.type = '请'
            }
            this.res.push(ele)
          })

          this.pageNum = res.data.page.pageNum
          this.pageSize = res.data.page.pageSize
          this.total = res.data.page.total

          if (this.res && this.res.length >= this.total) {
            this.loadAllFlag = true
          }
        })
    },
    gotoDetail (obj) {

      let params = {
        applyId: obj.busi_id || obj.applyId,
        exectionId: obj.exectionId
      }
      localStorage.setItem('tab2Params', JSON.stringify(params))


      this.$router.push({ name: 't2detail' })


    }
  },

  mounted () {
    this.sendAjax()
  }
}
</script>

<style lang='less' scoped>
.pass {
  color: #339966;
}

.nook {
  color: #c7254e;
}

.checking {
  color: #38f;
}
.noData {
  margin-top: 100px;
  div{
    background-color: #fff;
    text-align: center;
    border-radius: 50%;
    padding: 50px;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    img {
      display: inline-block;
      height: 200px;
      width: 200px;
    }
  }
  p {
    margin-top: 20px;
    text-align: center;
  }
}
.loadmore {
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  margin: 20px 0;
}

.loadmore2 {
  color: #999;
  text-align: center;
  font-size: 16px;
  margin: 20px 0;
}
.tab1 {
  padding: 20px 0;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.04);
  min-height: 100%;
  .tab1-list:first-of-type {
    margin-top: 40px;
  }
  .tab1-list {
    width: 75%;
    margin: 20px auto 0 auto;
    padding-bottom: 16px;
    padding-top: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
      0 1px 4px rgba(0, 0, 0, 0.117647);
    transition: all 0.3s linear;
    cursor: pointer;
    background-color: #fff;
    border-radius: 4px;

    &:hover {
      transform: translate(-2px, -2px);
    }
    li {
      & > div{
        display: inline-block;
      }
    }
    & > li:first-of-type {
      margin-bottom: 20px;
      margin-left: 0;
    }

    & > li {
      margin-top: 10px;
      margin-left: 20px;

      .reason {
        max-width: 88%;
        white-space: wrap;
        word-wrap: break-word;
      }

      .tab1-list-icon {
        display: block;
        position: relative;
        top: -2px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background-color: #38f;
        font-size: 14px;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        margin-left: 20px;
        margin-right: 10px;
      }
      .tab1-list-icon.xiaojia {
        background-color: #1cbe29fb;
      }
    }
  }
}
.color-999 {
  color: #999;
  margin-right: 20px;
}

.color-38f {
  color: #38f;
}
</style>